<template>
	<el-row class="menumanag">
		<el-col :span="22" :offset="1">
			<div class="btnsead">
				<div class="seach">
					<el-input class="inputseach" v-model="inputmenu" :value="inputmenu" @keyup.enter.native="searchmenu"
						placeholder="请输入菜单名称"></el-input>
					<el-button @click="searchmenu" type="primary" icon="el-icon-search" style="background-color:#106ab1 ;">搜索</el-button>
				</div>
				<div class="add">
					<el-button @click="addmenu" type="primary" icon="el-icon-circle-plus-outline">添加</el-button>
				</div>
			</div>
			<div class="fromes">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="menuName" label="名称">
					</el-table-column>
					<el-table-column prop="" label="权限">
						<template slot="header" slot-scope="scope">
							<el-dropdown @command="siftuser" trigger="click">
								<span class="el-dropdown-link">
									权限<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="无">全部</el-dropdown-item>
									<el-dropdown-item :command="x.roleId" v-for="(x, index) in checkList" :key="index">{{
										x.roleName }}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
						<template slot-scope="scope">
							<span v-for="(x, index) in tableData[scope.$index].roles" :key="index"><span v-if="index != 0"> /
								</span>{{ x.roleName }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="path" label="访问路径">
					</el-table-column>
					<el-table-column prop="parentMenu" label="父级菜单">
					</el-table-column>
					<el-table-column prop="caidan" label="操作" class="caobtn" width="150px">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="changemenu(scope)"
								class="xui_menu xui_menua">修改</el-button>

							<el-button slot="reference" type="text" size="small" class="xui_menu del_menua"
								@click="deletemenu(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page">
				<el-pagination layout="prev, pager, next" :total="total" :current-page="currentpage"
					@current-change="changepage" :page-size="pagesize">
				</el-pagination>
			</div>
			<el-dialog title="" :visible.sync="outerVisible" width="30%" center>
				<span class="delqurren">确认删除吗?</span>
				<span slot="footer" class="dialog-footer">
					<el-button @click="outerVisible = false">取 消</el-button>
					<el-button type="primary" @click="delqueren">确 定</el-button>
				</span>
			</el-dialog>
		</el-col>
	</el-row>
</template>
<script>
export default {
	data() {
		return {
			baseUrl: require("../js/baseUrl.js").baseUrl,
			currentpage: 1,
			menuId: 0,
			roleId: '无',
			pagesize: 5,  //每页显示数据条数
			centerDialogVisible: false,//显示对话框
			outerVisible: false,//删除确认
			inputmenu: "",
			searchword: "",
			total: 0,//页数
			tableData: [],
			alltabeldata: [],
			checkList: [],
			alltotals: 0,
		};
	},
	methods: {
		siftuser(v) {
			//根据权限查询
			// menu/findByRole
			if(v=='无'){
				this.currentpage=1
				this.roleId = v
				this.getmenufind()
			}else{
				this.roleId = v
				this.currentpage=1
				this.findRole()
			}		
		},
		//根据权限查询
		findRole() {
			this.$http.post(this.baseUrl + "SchoolSys/menu/findByRole", {
				pageIndex: this.currentpage + "",
				pageSize: this.pagesize + "",
				roleId: this.roleId + ""
			}).then(res => {
				if(res.data.code==200){
					this.tableData = res.data.data.list.list
					this.total = res.data.data.num
				}else{
					this.$message.error(res.data.msg)
				}
		
			})
		},
		//删除菜单
		deletemenu(v) {
			this.menuId = v.menuId
			this.outerVisible = true
		},
		//确认删除
		delqueren() {
			this.outerVisible = false
			this.$http.post(this.baseUrl + "SchoolSys/menu/del", {
				menuId: this.menuId
			}).then(res => {
				if (res.data.code == 200) {
					this.$message.success("删除成功")
					this.getmenufind()
				}else{
					this.$message.error(res.data.msg)
				}
			})
		},
		//查询用户权限
		getrole() {
			this.$http.post(this.baseUrl + "SchoolSys/role/find", {
				pageIndex: "1",
				pageSize: this.pagesize + ""
			}).then(res => {
				if (res.data.code == 200) {
					this.alltotals = res.data.data.num * this.pagesize
					this.getroletwo()
				}else{
					this.$message.error(res.data.msg)
				}
			})
		},
		getroletwo() {
			this.$http.post(this.baseUrl + "SchoolSys/role/find", {
				pageIndex: "1",
				pageSize: this.alltotals + ""
			}).then(res => {
				if (res.data.code == 200) {
					this.checkList = res.data.data.list
				}else{
					this.$message.error(res.data.msg)
				}
			})
		},
		//查询菜单
		changemenu(details) {
			this.$router.push("/menumanager/addnewmenu?menuName=" + details.row.menuName)
		},
		addmenu() {
			// alert("添加菜单")
			this.$router.push("/menumanager/addnewmenu")
		},
		searchmenu() {
			this.currentpage = 1
			this.roleId ='无'
			this.searchword = this.inputmenu
			this.findmenuName()
		},
		findmenuName() {
			this.$http.post(this.baseUrl + "SchoolSys/menu/findByName", {
				pageIndex: this.currentpage + "",
				pageSize: this.pagesize + "",
				menuName: this.searchword + ""
			}).then(res => {
				if(res.data.code==200){
					this.tableData = res.data.data.list.list
					this.total = res.data.data.num
				}else{
					this.$message.error(res.data.msg)
				}
	
			})
		},
		//改变页数
		changepage(v) {
			this.currentpage = v
			this.inputmenu = this.searchword
			if (this.searchword != "") {
				this.findmenuName()
			} else {
				if (this.roleId!='无') {
					this.findRole()
				} else {
					this.getmenufind()
				}
			}


		},
		getmenufind() {
			this.$http.post(this.baseUrl + "SchoolSys/menu/find", {
				pageIndex: this.currentpage + "",
				pageSize: this.pagesize + ""
			}).then(res => {
				if(res.data.code==200){
					this.tableData = res.data.data.list.list
					this.total = res.data.data.num
				}else{
					this.$message.error(res.data.msg)
				}
			})
		}
	},
	mounted() {
		this.getmenufind()
		this.getrole()
	},
}

</script>

<style lang="less">
.btnsead {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.menumanag {
	.page {
		text-align: center;
		margin-top: 30px;
	}
}

.seach {
	display: flex;
	height: 90px;
	align-items: center;
	padding: 7px 9px;

	.inputseach {
		width: 200px;
		margin-right: 30px;
	}
}

.fromes .el-table .el-table__cell {
	padding: 5px 0 !important;
}

.menumanag .fromes .el-table {
	margin: 0;
}

.delqurren {
	display: block;
	text-align: center;
	font-size: 20px;
}

.fromes {
	.del_menua {
		color: #ff0000;
	}

	.xui_menua {
		color: #6cac39;
	}

	.xui_menu {
		margin-right: 5px;
	}

	.el-button--success {
		margin-right: 5px;
	}

	.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		text-align: center;
	}

	.el-table::before {
		background-color: #f3f8fd;
	}

	.el-table__row {
		border-radius: 30px !important;
	}

	.el-table * {
		border: none !important;
	}

	.el-table .el-table__body {
		border-spacing: 0 15px;
	}

	.el-table th.el-table__cell {
		background: #f3f8fd;

	}

	.el-table {
		background: transparent;
	}

	.el-table .el-table__cell {
		padding: 10px 0;
	}
}

.menumanag {
	min-height: 90vh;
}
</style>